﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Music player</title>
    <link rel="stylesheet" href="./player.css">
</head>

<body>
    <!--播放器-->
    <div id="player">
        <!--播放控件-->
        <div id="playerControl">
            <input type="text" v-model="query" @keyup.enter="searchMusic" placeholder="请搜索歌曲！！">
            <h1 class="vintage4">My Music</h1>
        </div>
        <!--播放进度-->

        <audio ref="mv" id="audio" @play="play" @pause="pause" :src="musicUrl" controls="controls" autoplay loop class="musicPoint"></audio>
        <div v-show="isAudio" class="audioMask"></div>
        <!--音频列表-->
        <div id="playerList">
            <ul class="song_wrapper">
                <li v-show="musicList.length==0">
                    <h2>请搜索歌曲！！</h2>
                </li>
                <li :class="{active:currentIndex==index}" v-for="(item,index) in musicList" @click="playMusic(item.id),getIndex(index)">{{item.name}}&nbsp;&nbsp;&nbsp;
                    <span class="mvicon" v-if="item.mvid!=0" @click.stop='palyMv(item.mvid)'><i></i></span></li>

            </ul>
            <div id="cover">
                <div class="cover"></div>
            </div>

        </div>
        <!-- 热门评论 -->
        <div class="hotComments">
            <div id="cover2">
                <div class="cover2"></div>
            </div>
            <h2 class="title">热门评论：</h2>
            <div class="list">
                <dl v-for="item in hotComments">
                    <dt><img :src="item.user.avatarUrl" alt=""></dt>
                    <dd class="name">{{item.user.nickname}}</dd>
                    <dd class="content">{{item.content}}</dd>
                </dl>
            </div>

        </div>
        <!-- 专辑封面 -->
        <div class="playerBg">
            <div class="playing">
                <img :src="musicCover" alt="" class="bgimg autoRotate" :class="{active:isActive}">
                <img v-if="!musicCover" src="https://p1.music.126.net/CZQlP4Qgy2jbk22BKyDkUA==/120946279068589.jpg" alt="" class="bgimg">
                <!-- <img src="https://i.loli.net/2020/03/23/gZHko2WlpJNcGPv.png" class="play_bar"> -->
                <img src="https://i.loli.net/2020/03/23/hQPuH4gNRx7XayI.png" class="disc autoRotate" :class="{active:isActive}">
            </div>
        </div>
        <!-- mv播放 -->
        <div v-show="isShow" class="mvPlay">
            <video controls autoplay loop :src="mvUrl"></video>

            <div @click="delMv" class="mask"></div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const app = new Vue({
        el: '#player',
        data: {
            query: "",
            //歌曲列表
            musicList: [],
            //歌曲地址
            musicUrl: '',
            // 歌曲封面
            musicCover: '',
            // 歌曲评论
            hotComments: "",
            //动画播放状态
            isPlaying: false,
            //遮罩层的显示状态（是否可以播放mv）
            isShow: false,
            //mv地址
            mvUrl: '',
            show: false,
            isActive: false,
            // audio背景颜色
            isAudio: false,
            //当前播放歌曲
            currentIndex: -1

        },
        methods: {
            //查询歌曲
            searchMusic() {
                //因为在
                let that = this;
                axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(function(respons) {
                    console.log(respons);
                    that.musicList = respons.data.result.songs
                }, function(err) {})
                this.currentIndex = -1
            },

            //播放歌曲
            playMusic(musicId) {
                let that = this;
                //歌曲地址获取
                axios.get("https://autumnfish.cn/song/url?id=" + musicId)
                    .then(function(response) {
                        that.musicUrl = response.data.data[0].url;
                    }, function(err) {})
                    // 歌曲详情获取
                axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
                    .then(function(response) {
                        that.musicCover = response.data.songs[0].al.picUrl;

                    }, function(err) {})
                    //歌曲评论获取
                axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
                    .then(function(response) {
                        console.log(response.data.hotComments);
                        that.hotComments = response.data.hotComments;
                    }, function(err) {})
                this.isActive = true;
                this.isBg = true;
                console.log(musicId);

            },
            play() {
                console.log("play");
                this.isActive = true;
            },
            pause() {
                console.log("pause");
                this.isActive = false;
            },
            palyMv(mvid) {
                let that = this;
                axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
                    .then(function(response) {
                        that.mvUrl = response.data.data.url;
                    }, function(err) {})
                this.isShow = "ture";
                this.isAudio = 'ture';
                this.$refs.mv.pause()
            },
            delMv() {
                this.isShow = false;
                this.mvUrl = " ";
                this.isAudio = false
            },
            // 点击变色
            getIndex(index) {
                this.currentIndex = index

            }

        },
        created() {

            //初始歌曲
            let that = this;
            axios.get("https://autumnfish.cn/search?keywords=" + "李宗盛").then(function(respons) {
                    console.log(respons);
                    that.musicList = respons.data.result.songs
                }, function(err) {})
                //初始热搜
            axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + 394670)
                .then(function(response) {
                    console.log(response.data.hotComments);
                    that.hotComments = response.data.hotComments;
                }, function(err) {})

        }
    });
</script>

</html>